<template>
    <div class="home-box">
        <!-- <my-header></my-header> -->
        <div class="background" ref="background" v-show="flag"></div>
        <div class="nav">
            <div class="nav-logo"></div>
            <div class="nav-search">
                <router-link to="/search">
                    <van-search
                        v-model="value1"
                        placeholder="请输入搜索关键词"
                        show-action
                        shape="round"
                    >
                        <div slot="action" class="van-icon van-icon-contact"></div>
                    </van-search>
                </router-link>
            </div>
            <!-- <div class="nav-login"></div> -->
        </div>

        
            <van-swipe :autoplay="3000">
                <van-swipe-item v-for="(image, index) in images" :key="index">
                    <!-- {{ image }} -->
                    <transition appear tag="ul">
                        <router-link :to="judge(index)">
                            <img :src="image"/>
                        </router-link>
                    </transition>
                </van-swipe-item>
            </van-swipe>

        <!-- 导航部分 -->
        <div class="nav-box">
            <ul class="nav-ul">
                <router-link @click="judge4(navValue.roomTitle)" :to="judge(navValue.roomTitle)" tag="li" class="nav-li" v-for="(navValue, index) in navContent" :key="index">
                    <img :src="navValue.headImg" alt="">
                    <span>{{ navValue.roomTitle }}</span>
                </router-link>
            </ul>
        </div>
        <!-- 健康头条 -->
        <div class="news">
            <div class="news-left">
                <img data-v-521af92e="" src="" alt="">
            </div>
            <van-swipe :autoplay="3000" :height="18" vertical style="lineHeight: 18px">
                <van-swipe-item v-for="(nav, index) in newTitle" :key="index"><span data-v-521af92e="" class="jktt-type">文章</span>{{ nav.roomTitle }}</van-swipe-item>
                <div class="custom-indicator" slot="indicator">
                    {{ current + 1 }}/4
                </div>
            </van-swipe>
        </div>
        <!-- 精选 -->
        <div class="img-box">
            <img :src="getHomes[3].rooms[0].headImg" alt="">
        </div>
        <!-- 精选图片 -->
        <div class="pro-theme-list">
            <div class="item" v-for="(value, index) in proList" :key="index">
                <router-link :to="judge1(index)">
                    <img :src="choicenessImage[index]" alt="">
                </router-link>
            </div>
        </div>
        <div class="pro-theme-list">
            <div class="item" v-for="(value, index) in proList1" :key="index">
                <router-link :to="judge2(index)">
                    <img :src="choicenessImage1[index]" alt="">
                </router-link>
                
            </div>
        </div>
        <!-- 精选1结束 -->
        <div class="img-box">
            <img :src="getHomes[8].rooms[0].headImg" alt="">
        </div>

        <!-- 精选2 -->
        <div class="img-box">
            <img :src="getHomes[9].rooms[0].headImg" alt="">
        </div>
        <!-- 精选图片2 -->
        <div class="pro-theme-list">
            <div class="item" v-for="(value, index) in proList2" :key="index">
                <router-link :to="judge3(index)">
                    <img :src="value.headImg" alt="">
                </router-link>
            </div>
        </div>
        <div class="pro-theme-list">
            <div class="item" v-for="(value, index) in proList3" :key="index">
                <img :src="value.headImg" alt="">
            </div>
        </div>
        <!-- 精选2结束 -->
        <div class="img-box">
            <img :src="getHomes[18].rooms[0].headImg" alt="">
        </div>
        <!-- 精选3 -->
        <div class="img-box">
            <img :src="getHomes[19].rooms[0].headImg" alt="">
        </div>
        <div class="recommend-list">
            <div class="rl-item" v-for="(value, index) in proList4" :key="index">
                <router-link :to="'/product/' + value.productCode">
                    <img :src="value.productImageUrl" alt="">
                    <div class="rl-text">
                        <span class="name">{{ value.productName }}</span>
                        <span class="info">{{ value.info }}</span>
                        <span class="price">
                            <em>￥</em>
                            {{ value.promotionPrice/100+ '.00' }}
                        </span>
                    </div>
                </router-link>
            </div>
        </div>
        <!-- 精选3结束 -->
        <div class="img-box img-footer">
            <img :src="getHomes[21].rooms[0].headImg" alt="">
        </div>


        <my-footer :page = "page"></my-footer>
    </div>
</template>

<script>
import myHeader from 'Components/common/myHeader'
import myFooter from 'Components/common/myFooter'
import { mapActions, mapGetters } from 'vuex'

export default {
    data () {
        return {
            value1: '',
            current: 0,
            page: 0,
            flag: false,
            // images: [
            //     'https://img.yzcdn.cn/1.jpg',
            //     'https://img.yzcdn.cn/2.jpg'
            // ]
            images: [
                'https://img5.jianke.com/mall/vmall/index/201905/81a2b107285c47fba4b9632412ded7f3.jpg',
                'https://img5.jianke.com/mall/vmall/index/201905/3cf8b3e2b54840669714521973c41495.jpg',
                'https://img5.jianke.com/mall/vmall/index/201905/21af0d19dd1a4992942f4cdbdbb9d56e.jpg',
                'https://img5.jianke.com/mall/vmall/index/201905/3053a9965f814966bf1abe915437e530.jpg',
                'https://img5.jianke.com/mall/vmall/index/201905/f02aa8bb2a1d47b5a96916c1f0929a98.jpg',
                'https://img5.jianke.com/mall/vmall/index/201905/5569dc8f8c15418ba1ab54bf565556a8.jpg',
                'https://img5.jianke.com/mall/vmall/index/201903/238d2bf20ff7459d95bef9245412df7c.jpg',
                'https://img5.jianke.com/mall/vmall/index/201905/b1614b17a0f04715b8a02e9a5de54263.jpg',
                // 'https://img5.jianke.com/mall/vmall/index/201905/b1614b17a0f04715b8a02e9a5de54263.jpg',
                // 'https://img5.jianke.com/mall/vmall/index/201905/81a2b107285c47fba4b9632412ded7f3.jpg',
            ],
            choicenessImage: [
                'https://img5.jianke.com/mall/vmall/index/201905/8b005af403b44f67ac75075d5b938db7.jpg',
                'https://img5.jianke.com/mall/vmall/index/201905/5723ce9ea11948d9ba0d3819f2dd2db2.jpg',
            ],
            choicenessImage1: [
                'https://img5.jianke.com/mall/vmall/index/201905/c9089d1de6bb4e5b80119d2e039f81f6.png',
                'https://img5.jianke.com/mall/vmall/index/201905/de72ffa068ed4623a85b02b271663a94.jpg'
            ],
            navContent: [],
            newTitle: [],
            proList: [],
            proList1: [],
            proList2: [],
            proList3: [],
            proList4: [],
        }
    },
    methods: {
        ...mapActions(['getHome']),
        handleScroll () {
            let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
            let offsetTop1 = this.$refs.background && this.$refs.background.offsetHeight || 43
            this.flag = scrollTop > offsetTop1 ?  true : false
        },
        judge4 (value) {
            switch(value) {
                case '用药咨询':
                    alert('正在维护！！');
            }
        },
        judge (value) {
            switch(value) {
                // 轮播图部分
                case 0:
                    return '/activity/mobile/5';
                case 1:
                    return '/activity/mobile/6';
                case 2:
                    return '/activity/mobile/7';
                case 3:
                    return '/activity/mobile/8';
                case 4:
                    return '/product/861657';
                case 5:
                    return '/activity/mobile/10';
                case 6:
                    return '/product/856835';
                case 7:
                    return '/activity/mobile/12';

                // 导航部分
                case '用药咨询':
                    // alert('功能正在维护！！')
                    return '/home';
                case '领券中心':
                    return '/coupon/couponDrawList';
                case '按症找药':
                    return '/goodsList/5411';
                case '肝病艾滋':
                    return '/activity/mobile/1';
                case '男性':
                    return '/activity/mobile/2';
                case '女性':
                    return '/activity/mobile/3';
                case '全球购':
                    return '/activity/mobile/4';
                case '医疗器械':
                    return '/instrument';
            }
        },
        judge1 (value) {
            switch(value) {
                // 轮播图部分
                case 0:
                    return '/activity/mobile/5';
                case 1:
                    return '/activity/mobile/childhood';
            }
        },
        judge2 (value) {
            switch(value) {
                // 轮播图部分
                case 0:
                    return '/product/856835';
                case 1:
                    return '/activity/mobile/HIV';
            }
        },
        judge3 (value) {
            switch(value) {
                // 轮播图部分
                case 0:
                    return '/activity/mobile/2';
                case 1:
                    return '/activity/mobile/3';
            }
        },
    },
    computed: {
        ...mapGetters(['getHomes'])
    },
    async created () {
        await this.getHome()
        // this.images = this.getHomes && this.getHomes[0].rooms || []
        this.navContent = this.getHomes && this.getHomes[1].rooms || []
        this.newTitle = this.getHomes && this.getHomes[2].rooms || []
        this.proList = this.getHomes && this.getHomes[4].rooms || []
        this.proList1 = this.getHomes && this.getHomes[5].rooms || []
        this.proList2 = this.getHomes && this.getHomes[10].rooms || []
        this.proList3 = this.getHomes && this.getHomes[11].rooms || []
        this.proList4 = this.getHomes && this.getHomes[20].rooms || []
    },
    components: {
        myHeader,myFooter
    },
    mounted () {
        window.addEventListener('scroll', this.handleScroll)
    }
}
</script>

<style lang="stylus" scoped>
@import '~Css/_ellipsis.styl';
    .home-box {
        background: #f4f4f4;
    }
    img {
        width: 100%;
        height: 100%;
    }
    a {
        color: #333;
    }

    // 导航条
    .background {
        background: #0082f0;
        opacity: 0.749625;
        position fixed;
        z-index: 3;
        width: 100%;
        height: .43rem;    
    }
    .nav {
        height: .43rem;
        display: flex;
        z-index: 3
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        align-items: center;
        justify-content: center;
        .nav-logo {
            // width
            flex: 50;
            // background-image: url('../assets/image/健客医生.png') no-replace;
        }
        

        .nav-search {
            flex: 225;    
            .van-search {
                padding: 0; 
                background: none !important;    
                .van-search__content {

                }
                .van-cell {
                    line-height: .18rem;    
                }
                .van-search__action {
                    padding-right: .35rem;   
                    color: #fff !important; 
                }
            }
        }
        // .nav-login {
        //     flex: 72;    
        // }
    }

    // 导航栏
    .nav-box {
        height: 1.48rem;
        padding-top: .05rem;
        padding-bottom: .1rem;
        background: #fff;
        .nav-ul{
            display: flex;
            flex-wrap: wrap;
            .nav-li {
                flex: 25%;
                text-align: center;
                box-sizing: border-box;
                padding-top: .1rem;
                span {
                    font-size: .12rem;
                }
                img {
                    width: .4rem;
                    height: .4rem;
                    display: block;
                    margin: .05rem auto;
                }
            }
        }
    }
    // 健康导航
    .news {
        padding: .05rem 0.12rem;
        height: .36rem;
        display: flex;
        overflow: hidden;
        background: #fff;
        .news-left {
            padding: .05rem;
            img {
                width: .3rem;
                height: .3rem;
            }
        }
        .van-swipe {
            flex: 1;
            overflow: hidden;
            .van-swipe-item {
                // width: 100%;
                // margin: .025rem;
                // height: .14rem !important;
                // font-size: .15rem;
                // box-sizing: border-box;
                // ellipsis();
                // height: .18rem !important;
                padding: .025rem .24rem .025rem 0;
                text-overflow: ellipsis;
                white-space: nowrap;
                overflow: hidden;
                font-size: .12rem;
            }
            .jktt-type {
                display: inline-block;
                font-size: .1rem;
                border: 1px solid #f34242;
                color: #f34242;
                border-radius: 2px;
                padding: .01rem .02rem;
                margin-right: .05rem;
            }
            .van-swipe__indicators {
                display: none !important;
                .van-swipe__indicator {
                    display: none !important;
                    font-size: .12rem;
                }
            }
        }

    }
    .pro-theme-list {
        padding: 0 .12rem;
        display: flex;
        .item {
            padding: .05rem 0 0 0;    
        }
        .item:nth-child(1) {
            padding: .05rem .05rem 0 0;
        }
    }
    .recommend-list {
        display: flex;
        flex-wrap: wrap;    
        padding: 0 .12rem;
        .rl-item {
            flex: 49%;
            margin: .05rem .025rem 0 0;
            box-sizing: border-box;
            background: #fff;
            img {
                width: 100%;
                height: auto;
                margin-bottom: 0.05rem;
            }
            span {
                display: block;
            }
            .name {
                font-size: .14rem;
                height: .21rem;   
                // ellipsis(); 
                text-overflow: ellipsis;
                white-space: nowrap;
                overflow: hidden;
                width: 1.731rem;
            }
            .info {
                color: #999;
                font-size: .12rem;
                height: .18rem;    
                // ellipsis();
                text-overflow: ellipsis;
                white-space: nowrap;
                overflow: hidden;
                width: 1.731rem;
            }
            .price {
                color: #ff5f57;
                font-size: .14rem;
                height: .23rem;  
                em {
                    font-size: .12rem;
                }  
            }
        }
        .rl-item:nth-child(2n) {
            margin: .05rem 0 0 0.025rem;    
        }
    }
    .img-footer {
        margin-bottom: .5rem;
    }

    // 动画
    .v-enter,
    .v-leave-to{
        opacity: 0;
        transform: translate(150, 180);
    }
    .v-enter-active, .v-leave-active{
        transition: all 1s ease;
    }

    .v-move{
       transition: all 0.6s ease;
    }
    .v-leave-active{
        position: absolute;
    }
</style>
